<template>
  <el-dialog
    custom-class="moveDialog"
    :visible.sync="visible"
    width="600px"
    :title="$t('wiki.component.moveCatalog.title1')">
    <el-tree
      ref="typeMoveTree"
      class="typeMoveTree"
      :data="getDataFromParent ? moveTreeDataFromProp : moveTreeData"
      node-key="id"
      :highlight-current="true"
      :props="treeProps"
      :filter-node-method="moveTreeFilter"
      @current-change="data => currMoveChoose = data"
      :check-on-click-node="true">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="node-class">
          <i
            :class="{
              'icon-fenlei1': !['published'].includes(node.key),
              'icon-yifabu': node.key === 'published'
            }"
            class="iconfont">
          </i>
          <span>{{ node.label }}</span>
        </span>
      </span>
    </el-tree>

    <div slot="footer">
      <el-button @click="visible = false;currMoveChoose = void 0">{{$t('common.base.cancel')}}</el-button>
      <el-button
        type="primary"
        :disabled="!currMoveChoose"
        :loading="moveLoading"
        @click="type === 'catalog' ? moveWikiType() : moveWiki()">{{$t('common.base.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { moveWiki, moveWikiType, getDocumentTypes } from '@src/api/Repository';

export default {
  name: 'move-catalog',
  props: {
    value: Boolean,
    // visible: Boolean,
    type: { // 'catalog', 'wiki'
      type: String,
      require: true
    },
    beMoveData: Object, // 来源于列表或详情
    moveTreeDataFromProp: Array,
    getDataFromParent: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      visible: this.value,
      moveTreeData: [],
      treeProps: {
        label: 'name',
        children: 'subTypes'
      },
      currMoveChoose: void 0,
      moveLoading: false
    }
  },
  watch: {
    value(newValue) {
      this.visible = newValue
    },
    visible(newValue, oldValue) {
      this.$emit('input', newValue)
      if(newValue) {
        this.getTypes()
      } else {
        this.currMoveChoose = void 0
      }
    }
  },
  mounted() {
    if(!this.getDataFromParent) {
      this.getTypes()
    } else if (this.type === 'catalog') {
      // 去掉树中当前待移动的分类
      this.$nextTick(() => {
        this.$refs.typeMoveTree.remove(this.beMoveData)
      })
      this.$watch('moveTreeDataFromProp', (newValue, oldValue) => {
        if(newValue) {
          this.$nextTick(() => {
            this.$refs.typeMoveTree.remove(this.beMoveData)
          })
        }
      })
    }
  },
  methods: {
    // 底下有分类的时候需要一同过滤，否则无法过滤~
    moveTreeFilter(value, data, node) {
      return data.id !== this.beMoveData.id
    },
    // 移动分类
    async moveWikiType () {
      try {
        let operationId = this.beMoveData?.id
        let targetId = this.currMoveChoose?.id
        if (operationId === targetId) {
          this.$platform.notification({
            title: this.$t('wiki.component.moveCatalog.title2'),
            type: 'error',
          });
          return
        }
        if (!await this.$platform.confirm(this.$t('wiki.component.moveCatalog.tips1'))) return
        let params = {
          operationId,
          targetId: targetId === 'published' ? void 0 : targetId
        } 
        this.moveLoading = true
        let res = await moveWikiType(params);
        
        if (res.success) {
          this.$platform.notification({
            title: this.$t('wiki.component.moveCatalog.tips2'),
            type: 'success',
          });
          // this.$emit('closeVisible')
          this.visible = false
          this.currMoveChoose = void 0
          this.$emit('moveEnd')
          // await this.getTypes()
        } else {
          this.$platform.notification({
            title: res.message,
            type: 'error',
          });
        }
      } catch (e) {
        console.error(e);
      }
      this.moveLoading = false
    },
    // 移动文章
    async moveWiki () {
      try {
        let wikiId = this.beMoveData?.id
        let wikiTypeId = this.currMoveChoose?.id

        if (this.beMoveData?.typeId === wikiTypeId) {
          this.$platform.notification({
            title: this.$t('wiki.component.moveCatalog.tips3'),
            type: 'error',
          });
          return
        }
        if (!await this.$platform.confirm(this.$t('wiki.component.moveCatalog.tips4'))) return
        let params = {
          wikiId,
          wikiTypeId
        }

        this.moveLoading = true
        let res = await moveWiki(params);
        
        if (res.success) {
          this.$platform.notification({
            title: this.$t('wiki.component.moveCatalog.tips5'),
            type: 'success',
          });
          this.visible = false
          this.currMoveChoose = void 0
          this.$emit('moveEnd')
        } else {
          this.$platform.notification({
            title: res.message,
            type: 'error',
          });
        }
      } catch (e) {
        console.error(e);
      }
      this.moveLoading = false
    },
    // 获取分类二级树状结构
    async getTypes () {
      return new Promise(async (resolve, reject) => {
        try {
          let res = await getDocumentTypes();
          if(res.success) {
            this.moveTreeData = res.result
            resolve()
          } else {
            this.$platform.notification({
              title: res.message,
              type: 'error',
            });
            reject()
          }
        } catch (err) {
          console.error(err);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .moveDialog {
    .el-tree {
      height: 200px;
      overflow: auto;
      .el-tree-node__content {
        height: 40px;
        line-height: 40px;
        &:hover {
          background: #E6FFFB;
        }
      }
      .el-tree-node.is-current > .el-tree-node__content {
        background: #E6FFFB;
      }
      .el-tree-node:focus > .el-tree-node__content {
        background: fff;
      }
    }
  }
  ::v-deep .typeMoveTree {
    .el-tree-node__content>.el-tree-node__expand-icon:not(.is-leaf) {
      color: #595959;
    }
    .custom-tree-node {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
      .node-class {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #262626;
        font-size: 0;
        height: 40px;
        line-height: 40px;
        span {
          margin-left: 4px;
          font-size: 14px;
        }
      }
    }
  }
</style>